<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
    <style>
    .box{
        width: 400px;
        border: 1px solid #000;
        margin: 20px auto;
    }
    .tab{
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: #000;
    }
    .tab li{
		float: left;
		width: 60px;
		text-align: center;
		line-height: 26px;
        color: white;
    }
    .content{
        text-align: center;
    }
    .tab li.active{
		color: black;
		background-color: #aaa;
	}
	p{
		display: none;
	}
	p:first-child{
		display: block;
	}
	.clearfix::after{
		content: '';
		clear: both;
		display: block;
		height: 0;
		visibility: hidden;
	}
    </style>
</head>
<body>
<div class="box">
    <ul class="tab clearfix">
        <li class="active">选项一</li>
        <li>选项二</li>
        <li>选项三</li>
    </ul>
    <div class="content">
        <p>内容1<br>内容1<br>内容1</p>
        <p>内容2<br>内容2<br>内容2<br>内容2<br>内容2</p>
        <p>内容3<br>内容3<br>内容3</p>
    </div>
</div>



    <script src="./jquery.js"></script>
</body>
</html>

<script>



    $('li').each(function () {
        $(this).mousemove(function () {
            $(this).css('background-color', '#aaa').css('color', '#000')
                .siblings().css('background-color', '#000').css('color', '#aaa')

            $($('p')[$(this).index()]).css('display', 'block').siblings().css('display', 'none');
             console.log($(this).index());
        })
    })
   


</script>